<template>
  <div>
    <!--  首部小导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/mine' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>我的订单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <!--    查询条件输入框开始-->
    <el-tabs type="border-card" @tab-click="handleClick" :value="String(orderState)">
      <el-tab-pane label="全部订单" name="7">
        <OrderMultiCondition @updateTableDate="updateTableDate"></OrderMultiCondition>
      </el-tab-pane>
      <el-tab-pane label="交易中订单" name="8">
        <OrderMultiCondition @updateTableDate="updateTableDate"></OrderMultiCondition>
      </el-tab-pane>
      <el-tab-pane label="待确认" name="1">
        <order-multi-condition2 :state="1" @updateTableDate="updateTableDate"></order-multi-condition2>
      </el-tab-pane>
      <el-tab-pane label="待付款" name="2">
        <order-multi-condition2 :state="2" @updateTableDate="updateTableDate"></order-multi-condition2>
      </el-tab-pane>
      <el-tab-pane label="待发货" name="3">
        <order-multi-condition2 :state="3" @updateTableDate="updateTableDate"></order-multi-condition2>
      </el-tab-pane>
      <el-tab-pane label="待确认收货" name="4">
        <order-multi-condition2 :state="4" @updateTableDate="updateTableDate"></order-multi-condition2>
      </el-tab-pane>
      <el-tab-pane label="退货/退款" name="5">
        <order-multi-condition2 :state="5" @updateTableDate="updateTableDate"></order-multi-condition2>
      </el-tab-pane>
      <el-tab-pane label="待评价" name="6">
        <order-multi-condition2 :state="6" @updateTableDate="updateTableDate"></order-multi-condition2>
      </el-tab-pane>
      <el-tab-pane label="其他" name="9">
        其他
      </el-tab-pane>
    </el-tabs>
    <!--    查询条件输入框开始-->
    <el-divider></el-divider>
    <!--    展示订单开始-->

    <div v-for="order in this.tableData">
      <el-container>
          <div style="background-color: #deebf7;border: #365899">
            <span>订单号： {{ order.orderNumber }} </span>
            <span style="margin-left: 40px">发货单号：{{order.expressOrder}}</span>
            <span style="margin-left: 40px">
              <span v-if="order.state===1">待确定</span>
              <span v-if="order.state===2">待支付</span>
              <span v-if="order.state===3">待发货</span>
              <span v-if="order.state===4">待确认收货</span>
              <span v-if="order.state===5">退货/退款</span>
              <span v-if="order.state===6">待评价</span>
            </span>
          </div>
        <div style="margin: 10px 0 0 50px">
          <table >
            <tr v-for="book in order.books" >
              <td><img style="width: 48px" :src="book.picture" alt=""></td>
              <td style="width: 250px;padding-left: 40px"><span style="width: 48px;height: 48px">《{{ book.bookName }}》</span></td>
              <td style="width: 120px;padding-left: 40px"><span>数量：{{ book.count }}</span></td>
              <td style="width: 120px;padding-left: 40px"><span>价格：{{ book.price }}</span></td>
              <td style="width: 120px;padding-left: 40px"><span>总金额：{{ book.amount }}</span>
                <a v-if="order.state===2" href="/pay">去支付</a></td>
            </tr>
          </table>
        </div>
        <hr style="border: #8c939d solid;margin: 5px 0">
        <el-footer>
          <div >
            <span>收货人：{{order.receiver}}</span>
            <span style="margin-left: 100px">地址：{{order.address}}</span>

            <span style="margin-left: 100px">{{ order.created }}</span>
          </div>
        </el-footer>
      </el-container>
    </div>
    <!--    展示订单结束-->


  </div>
</template>

<script>
import {mapState} from "vuex";
import OrderMultiCondition from "@/components/OrderMultiCondition";
import OrderMultiCondition2 from "@/components/OrderMultiCondition2";
import axios from "axios";

export default {
  components: {OrderMultiCondition2, OrderMultiCondition},
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    //如果状态为7就查询所有订单
    if (this.orderState === '7') {
      axios.get("/order/" + this.userId).then(r => {
        console.log("通过状态获取到数据")
        console.log(r.data.data)
        this.tableData = r.data.data
      }).catch(e => {
        console.log(e)
      })
    } else {
      //从info被选中了1-7的状态，根据状态请求订单
      axios.get("/order/" + this.userId + "/" + this.orderState).then(r => {
        console.log("通过状态获取到数据")
        console.log(r.data.data)
        this.tableData = r.data.data
      }).catch(e => console.log(e))
    }

  },
  methods: {
    //多条件组件提交请求后会调用，更新订单展示界面的方法
    updateTableDate(tableData) {
      this.tableData = tableData
    },
    //点击订单状态菜单请求对应的订单信息
    handleClick(state) {
      let data = {state: ''}
      data.state = (state.index - 1)
      if (data.state > 0)
        axios.get("/order/" + this.userId + "/" + data.state).then(r => {
          console.log("通过状态获取到数据")
          console.log(r.data.data)
          this.tableData = r.data.data
        }).catch(e => console.log(e))
    }
  },
  computed: {
    ...mapState(['url', 'orderState', "userId"])
  }

}
</script>

<style scoped>

</style>

